import React,{Component} from 'react';

export default class carousel extends Component{
    render(){
        return (
            <div >
                <div id="slidershow" className="carousel slide" data-ride="carousel" data-interval={2000}  data-pause = "hover" data-wrap="true" style={{marginTop: "1rem",width: "60%",height: "60%", marginLeft:"auto", marginRight:"auto"}}>
                    {/* <ol className="carousel-indicators">
                        <li data-target="#slidershow" data-slide-to="0" className="active"></li>
                        <li data-target="#slidershow" data-slide-to="1"></li>
                        <li data-target="#slidershow" data-slide-to="2"></li>
                    </ol>   */} 
                    <div className="carousel-inner" style={{height:'220px'}}>
                        <div className="item active">
                            <a href="##"><img src={require('../assets/aaa.jpg')} alt="cat1"/></a>
                        </div>
                        <div className="item">
                            <a href="##"><img src={require('../assets/bbb.jpg')} alt="cat2"/></a>
                        </div>
                        <div className="item">
                            <a href="##"><img src={require('../assets/ccc.jpg')} alt="cat3"/></a>
                        </div>
                    </div>
                    <a className="left carousel-control" href="#slidershow" role="button" data-slide="prev" >
                        <span className="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a className="right carousel-control" href="#slidershow" role="button" data-slide="next">
                        <span className="glyphicon glyphicon-chevron-right"></span>
                    </a> 
                </div>
            </div>
        )
   }
}